<template>
	<view>
		<view class="search-bar">
			<view class="cu-bar search bg-white">
				<text class="margin-left-xs" @click="handleBack"><u-icon name="arrow-left"></u-icon></text>
				<view class="search-form round">
					<text class="cuIcon-search" @click="handleSearch"></text>
					<input :adjust-position="false" type="text" placeholder="请输入商家名或者商品名称" confirm-type="search"
						v-model="searchContent"></input>
				</view>
			</view>
		</view>
		<view class="historty">
			<view class="flex justify-between padding-sm">
				<view class="">
					历史搜索记录
				</view>
				<view @click="handleCleanHistory">
					<u-icon name="trash" size="24"></u-icon>
				</view>
			</view>
			<view class="flex padding-sm flex-wrap">
				<view class="histortyItem margin-xs" v-for="(item,index) in historySearchList" :key="index">
					{{item}}
				</view>
			</view>


		</view>
	</view>

</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				searchContent: ""
			};
		},
		computed: {
			...mapState({
				historySearchList: state => state.historySearchModule.historySearchlist
			})
		},
		methods: {
			...mapMutations({
				setHistorySearchList: "historySearchModule/setHistorySearchlist",
				cleanHistorySearchlist:"historySearchModule/cleanHistorySearchlist"
			}),
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleSearch() {
				this.setHistorySearchList(this.searchContent)
			},
			handleCleanHistory(){
				this.cleanHistorySearchlist()
			}

		}
	}
</script>

<style lang="scss">
	.histortyItem {
		padding-left: 10rpx;
		padding-right: 10rpx;
		height: 50rpx;
		border-radius: 10rpx;
		background-color: gainsboro;
		text-align: center;
		line-height: 50rpx;
	}
</style>